<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <style type="text/css">
        #e02, #e022 {
            border: 1px solid #000000;
            height: 200px;
            width: 200px;
        }

    </style>
    <script type="text/javascript">


        // 页面加载事件：当整个html页面加载成功调用
        window.onload = function(){
            // 文本框事件
            var e01 = document.getElementById("e01");
            e01.onfocus = function(){
                html("textMsg","文本框获得焦点：focus");
            }
            e01.onblur = function(){
                html("textMsg","文本框失去焦点：blur");
            }
            e01.onkeydown = function(){
                html("textMsg","键盘按下：keydown；");
            }
            e01.onkeypress = function(event){
                var event = event || window.event;
                append("textMsg","键盘按：keypress ("+ String.fromCharCode(event.keyCode)+")；");
            }
            e01.onkeyup = function(){
                append("textMsg","键盘弹起：keyup；");
            }

            // 鼠标事件
            var e02 = document.getElementById("e02");
            e02.onmouseover = function(){
                html("divMsg","鼠标移上：mouseover");
            }
            e02.onmouseout = function(){
                html("divMsg","鼠标移出：mouseout");
            }
            e02.onmousedown = function(){
                html("divMsg","鼠标按下：mousedown");
            }
            e02.onmouseup = function(){
                html("divMsg","鼠标弹起：mouseup");
            }

            var e022 = document.getElementById("e022");
            e022.onmousemove = function(event){
                var event = event || window.event;
                html("divMsg2","鼠标移动：mousemove , " + event.clientX + " -- " + event.clientY);
            };


            // 按钮事件
            var e03 = document.getElementById("e03");
            e03.onclick = function () {
                html("buttonMsg","单击：click");
            };
            e03.ondblclick= function () {
                html("buttonMsg","双击：dblclick");
            };

        };

        /**
         * 指定位置显示指定信息
         * @param objId ，元素的id属性值
         * @param  text，需要显示文本信息
         */
        function html(objId,text){
            document.getElementById(objId).innerHTML = text;
        }
        /**
         * 指定位置追加指定信息
         * @param objId ，元素的id属性值
         * @param  text，需要显示文本信息
         */
        function append(objId,text){
            document.getElementById(objId).innerHTML += text;
        }

    </script>

</head>
<body>
<input id="e01" type="text" /><span id="textMsg"></span>
<hr/>
<div id="e02" ></div><span id="divMsg"></span>
<hr/>
<div id="e022" ></div><span id="divMsg2"></span>
<hr/>
<input id="e03" type="button" value="可以点击"/><span id="buttonMsg"></span>
</body>
</html>